<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>客户分配</title>
	<link rel="stylesheet" href="${ctx}/statics/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${ctx}/statics/css/font-awesome.min.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/layer/skin/default/layer.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/bootstrap-table/bootstrap-table.css" />
	<link rel="stylesheet" href="${ctx}/statics/js/toastr/toastr.css" />

</head>
<body>

<!-- 添加和编辑模态窗口 -->
<div class="modal fade" id="entityModal" role="dialog"
	aria-labelledby="userModelLabel" aria-hidden="true"
	data-backdrop="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">分配客户</h4>
			</div>
			<div class="modal-body">
				<form id="entity_edit_form" class="form-horizontal">
					<input type="hidden" id="id" name="id">
					<div class="form-group">
						<label class="control-label col-sm-3">当前客户：</label>
						<div class="col-sm-8">
							<input type="text" class="form-control col-sm-3"
								name="customerName" disabled="disabled">
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-3">负责员工：</label>
						<div class="col-sm-8">
							<select class="form-control" id="un"  name="userId">
							</select>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-sm btn-primary"
					id="entityModalBtn">确定</button>
				<button type="button" class="btn btn-sm btn-default"
					data-dismiss="modal" id="Close">关闭</button>
			</div>
		</div>
	</div>
</div>





	<div id="main-content">
	<div class="row" >
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">客户信息</div>
				<!-- /.panel-heading -->
				<div class="panel-body" >
				
			<!-- 搜索                                                                -->	
				<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<form class="form-horizontal" role="form" id="entity_search_form">
								<div class="form-group">
									<div class="col-sm-4">
											<div class="input-group  ">
												<span class="input-group-addon"> <i class="icon-home"></i>
												</span> <input class="form-control input-mask-phone" type="text"
													id="form-field-mask-2" name="customerName" placeholder="客户名称">
											</div>
									</div>
									
									<div class="col-sm-1">
										<button class="btn btn-sm btn-info" type="submit">
											<i class="icon-search nav-search-icon"></i>
											查询
										</button> 
									</div>
									<div class="col-sm-1">
										<button class="btn btn-sm btn-primary" type="reset"	>
											<i class="icon-undo bigger-110"></i>
											清除
										</button> 
									</div>
								</div>
							</form>
						</div>
					</div><!-- 搜索                                                                -->	
				
				<!-- 主体表格                                                                -->	
					<table id="entity_table" class="table table-bordered table-hover">  <!-- id="user_table" -->
					</table><!-- 主体表格                                                                -->	
					
				</div><!-- panel body -->
			</div>
		</div>
	</div>
</div>
<%@ include file="../common.jsp" %>
<script type="text/javascript" src="${ctx}/statics/js/jquery-form/jquery.form.js"></script>
</body>
<script type="text/javascript">

$(function(){
getUsers();
$('#entity_table').bootstrapTable({
	url: '${ctx}/customerDistr/getList.do',
	pagination: true,
	paginationLoop: false,
	smartDisplay: false,
	striped: true,
    pageSize: 10,
    pageList: [10, 20, 50, 100],
    sidePagination: 'server',
    showRefresh: false,
    showColumns: false,
    paginationNextText:'下一页',
    paginationPreText:'上一页',
    cache: false,
	columns: [{
		field: 'id',
		title: 'ID',
		width: 50
	},{
		field: 'customerName',
		title: '客户姓名',
		width: 50
	},{
		field: 'conditionName',
		title: '客户状态',
		width: 50
	},{
		field: 'sourceName',
		title: '客户来源',
		width: 50
	},{
		field: 'typeName',
		title: '客户类型',
		width: 50
	},{
		field: 'customerJob',
		title: '职位',
		width: 50
	},{
		field: 'customerCompany',
		title: '公司',
		width: 100
	},{
		field: 'customerRemark',
		title: '备注',
		width: 150
	},{
		field: '',
		title: '操作',
		align: 'center',	
		width: 10,
		formatter: function(value, row, index){
			return '<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">'
					+'<button class="btn btn-xs btn-info" id="editData" title="分配"><i class="icon-edit bigger-130"></i></button>';
		},
		events: {
			'click #editData': editData,
		}
		
	}],
});
});

function editData(e, v, row) {
	$("#entity_edit_form")[0].reset();
	$("#entity_edit_form input[name=id]").val(row.id);
	$("#entity_edit_form input[name=customerName]").val(row.customerName);
	$("#un").val(row.userId);
	$('#entityModal').modal('show');
}

$("#entityModal").on('click', '#entityModalBtn', function() {
	$.ajax({
		url : "${ctx}/customerDistr/distrCustomer.do",
		type : "POST",
		data : $("#entity_edit_form").serialize(),
		success : function(data) {
			if (data.success == true) {
				$('#entityModal').modal('hide')
				$('#entity_table').bootstrapTable('refresh');
			} else {
				alert(data.errorMessage);
			}
			$("#entityModal").prop("disabled", false);
		}
	});

});
function getUsers(){
	$.ajax({
		url:"${ctx}/user/getAllList.do",
		type:"GET",
		data:{},
		success:function(data){
			if(data.success){
				var html="<option value=''>请选负责员工</option>"  ;
				for(var i=0;i<data.result.length;i++){
					html=html+"<option value='"+data.result[i].id+"'>"+data.result[i].userName+"</option>"
				}
				$("#un").html(html);
			}else{
				alert(data.errorMessage);
			}
		}
	});
}

</script>
</html>